<template>
<div class="posf color" v-bind:class="[getClass]" v-on:click="change" v-on:mouseover="mouseover">
        <div class="color-content bo-bg">
            <div class="color-toolbar">
                <div class="preview" v-bind:style="{backgroundColor: color}"></div>
                <div class="clear" v-on:click="clear">清除颜色</div>
            </div>
            <div class="color-title">通用颜色</div>
            <div class="color-common">
                <div class="color-common01 colors">
                    <span class="color-common-item" style="background-color: #ffffff; border-color: #eeeeee;" data-color="#ffffff"></span>
                    <span class="color-common-item" style="background-color: #000000; border-color: #000000;" data-color="#000000"></span>
                    <span class="color-common-item" style="background-color: #eeece1; border-color: #eeece1;" data-color="#eeece1"></span>
                    <span class="color-common-item" style="background-color: #1f497d; border-color: #1f497d;" data-color="#1f497d"></span>
                    <span class="color-common-item" style="background-color: #4f81bd; border-color: #4f81bd;" data-color="#4f81bd"></span>
                    <span class="color-common-item" style="background-color: #c0504d; border-color: #c0504d;" data-color="#c0504d"></span>
                    <span class="color-common-item" style="background-color: #9bbb59; border-color: #9bbb59;" data-color="#9bbb59"></span>
                    <span class="color-common-item" style="background-color: #8064a2; border-color: #8064a2;" data-color="#8064a2"></span>
                    <span class="color-common-item" style="background-color: #4bacc6; border-color: #4bacc6;" data-color="#4bacc6"></span>
                    <span class="color-common-item" style="background-color: #f79646; border-color: #f79646;" data-color="#f79646"></span>
                </div>
                <div class="color-common02 colors">
                    <span class="color-common-item" style="background-color: #f2f2f2; border-color: #f2f2f2;" data-color="#f2f2f2"></span>
                    <span class="color-common-item" style="background-color: #808080; border-color: #808080;" data-color="#808080"></span>
                    <span class="color-common-item" style="background-color: #ddd8c2; border-color: #ddd8c2;" data-color="#ddd8c2"></span>
                    <span class="color-common-item" style="background-color: #c6d9f1; border-color: #c6d9f1;" data-color="#c6d9f1"></span>
                    <span class="color-common-item" style="background-color: #dbe5f1; border-color: #dbe5f1;" data-color="#dbe5f1"></span>
                    <span class="color-common-item" style="background-color: #f2dbdb; border-color: #f2dbdb;" data-color="#f2dbdb"></span>
                    <span class="color-common-item" style="background-color: #eaf1dd; border-color: #eaf1dd;" data-color="#eaf1dd"></span>
                    <span class="color-common-item" style="background-color: #e5dfec; border-color: #e5dfec;" data-color="#e5dfec"></span>
                    <span class="color-common-item" style="background-color: #daeef3; border-color: #daeef3;" data-color="#daeef3"></span>
                    <span class="color-common-item" style="background-color: #fde9d9; border-color: #fde9d9;" data-color="#fde9d9"></span>
                </div>
                <div class="color-common03 colors">
                    <span class="color-common-item" style="background-color: #d9d9d9; border-color: #d9d9d9;" data-color="#d9d9d9"></span>
                    <span class="color-common-item" style="background-color: #595959; border-color: #595959;" data-color="#595959"></span>
                    <span class="color-common-item" style="background-color: #c4bc96; border-color: #c4bc96;" data-color="#c4bc96"></span>
                    <span class="color-common-item" style="background-color: #8db3e2; border-color: #8db3e2;" data-color="#8db3e2"></span>
                    <span class="color-common-item" style="background-color: #b8cce4; border-color: #b8cce4;" data-color="#b8cce4"></span>
                    <span class="color-common-item" style="background-color: #e5b8b7; border-color: #e5b8b7;" data-color="#e5b8b7"></span>
                    <span class="color-common-item" style="background-color: #d6e3bc; border-color: #d6e3bc;" data-color="#d6e3bc"></span>
                    <span class="color-common-item" style="background-color: #ccc0d9; border-color: #ccc0d9;" data-color="#ccc0d9"></span>
                    <span class="color-common-item" style="background-color: #b6dde8; border-color: #b6dde8;" data-color="#b6dde8"></span>
                    <span class="color-common-item" style="background-color: #fbd4b4; border-color: #fbd4b4;" data-color="#fbd4b4"></span>
                </div>
                <div class="color-common04 colors">
                    <span class="color-common-item" style="background-color: #bfbfbf; border-color: #bfbfbf;" data-color="#bfbfbf"></span>
                    <span class="color-common-item" style="background-color: #404040; border-color: #404040;" data-color="#404040"></span>
                    <span class="color-common-item" style="background-color: #938953; border-color: #938953;" data-color="#938953"></span>
                    <span class="color-common-item" style="background-color: #548dd4; border-color: #548dd4;" data-color="#548dd4"></span>
                    <span class="color-common-item" style="background-color: #95b3d7; border-color: #95b3d7;" data-color="#95b3d7"></span>
                    <span class="color-common-item" style="background-color: #d99594; border-color: #d99594;" data-color="#d99594"></span>
                    <span class="color-common-item" style="background-color: #c2d69b; border-color: #c2d69b;" data-color="#c2d69b"></span>
                    <span class="color-common-item" style="background-color: #b2a1c7; border-color: #b2a1c7;" data-color="#b2a1c7"></span>
                    <span class="color-common-item" style="background-color: #92cddc; border-color: #92cddc;" data-color="#92cddc"></span>
                    <span class="color-common-item" style="background-color: #fabf8f; border-color: #fabf8f;" data-color="#fabf8f"></span>
                </div>
                <div class="color-common05 colors">
                    <span class="color-common-item" style="background-color: #a6a6a6; border-color: #a6a6a6;" data-color="#a6a6a6"></span>
                    <span class="color-common-item" style="background-color: #262626; border-color: #262626;" data-color="#262626"></span>
                    <span class="color-common-item" style="background-color: #4a442a; border-color: #4a442a;" data-color="#4a442a"></span>
                    <span class="color-common-item" style="background-color: #17365d; border-color: #17365d;" data-color="#17365d"></span>
                    <span class="color-common-item" style="background-color: #365f91; border-color: #365f91;" data-color="#365f91"></span>
                    <span class="color-common-item" style="background-color: #943634; border-color: #943634;" data-color="#943634"></span>
                    <span class="color-common-item" style="background-color: #76923c; border-color: #76923c;" data-color="#76923c"></span>
                    <span class="color-common-item" style="background-color: #5f497a; border-color: #5f497a;" data-color="#5f497a"></span>
                    <span class="color-common-item" style="background-color: #31849b; border-color: #31849b;" data-color="#31849b"></span>
                    <span class="color-common-item" style="background-color: #e36c0a; border-color: #e36c0a;" data-color="#e36c0a"></span>
                </div>
                <div class="color-common06 colors">
                    <span class="color-common-item" style="background-color: #7f7f7f; border-color: #7f7f7f;" data-color="#7f7f7f"></span>
                    <span class="color-common-item" style="background-color: #0d0d0d; border-color: #0d0d0d;" data-color="#0d0d0d"></span>
                    <span class="color-common-item" style="background-color: #1c1a10; border-color: #1c1a10;" data-color="#1c1a10"></span>
                    <span class="color-common-item" style="background-color: #0f243e; border-color: #0f243e;" data-color="#0f243e"></span>
                    <span class="color-common-item" style="background-color: #243f60; border-color: #243f60;" data-color="#243f60"></span>
                    <span class="color-common-item" style="background-color: #622423; border-color: #622423;" data-color="#622423"></span>
                    <span class="color-common-item" style="background-color: #4e6128; border-color: #4e6128;" data-color="#4e6128"></span>
                    <span class="color-common-item" style="background-color: #3f3151; border-color: #3f3151;" data-color="#3f3151"></span>
                    <span class="color-common-item" style="background-color: #205867; border-color: #205867;" data-color="#205867"></span>
                    <span class="color-common-item" style="background-color: #974706; border-color: #974706;" data-color="#974706"></span>
                </div>
            </div>
            <div class="color-title">标准颜色</div>
            <div class="color-bottom colors">
                <span class="color-common-item" style="background-color: #c00000; border-color: #c00000;" data-color="#c00000"></span>
                <span class="color-common-item" style="background-color: #ff0000; border-color: #ff0000;" data-color="#ff0000"></span>
                <span class="color-common-item" style="background-color: #ffc000; border-color: #ffc000;" data-color="#ffc000"></span>
                <span class="color-common-item" style="background-color: #ffff00; border-color: #ffff00;" data-color="#ffff00"></span>
                <span class="color-common-item" style="background-color: #92d050; border-color: #92d050;" data-color="#92d050"></span>
                <span class="color-common-item" style="background-color: #00b050; border-color: #00b050;" data-color="#00b050"></span>
                <span class="color-common-item" style="background-color: #00b0f0; border-color: #00b0f0;" data-color="#00b0f0"></span>
                <span class="color-common-item" style="background-color: #0070c0; border-color: #0070c0;" data-color="#0070c0"></span>
                <span class="color-common-item" style="background-color: #002060; border-color: #002060;" data-color="#002060"></span>
                <span class="color-common-item" style="background-color: #7030a0; border-color: #7030a0;" data-color="#7030a0"></span>
            </div>
        </div>
    </div>
</template>

<script>
  import { mapState, mapGetters } from 'vuex'
  import {Observer} from '../../core/util'
  import { MessageBox, Message } from 'element-ui'
  // 颜色下拉框组件
  export default {
    data: function () {
        return {
            cmd: 'forecolor',
            show: false,
            color: '#ffffff'
        };
    },
    created: function () {
        var self = this;
        Observer.register('hidecloth', function () {
            self.show = false;
        });
        Observer.register('showcolorlist', function (cmd) {
            if (!window.editorId) return Message({
                message: $.i18n('messager_need_to_focus'),
                type: 'warning'
            });
            self.show = true;
            self.cmd = cmd;
            self.color = UE.getEditor(window.editorId).queryCommandValue(cmd);
        });
    },
    computed: {
        getClass: function () {
            var classList = [];
            if (!this.show) classList.push('hide');
            if (this.cmd === 'backcolor') classList.push('bgcolor');
            return classList.concat(['posf', 'color']);
        }
    },
    methods: {
        change: function (event) {
            var color = event.target.getAttribute('data-color');
            if (color) {
                Observer.fire('execCommand', [this.cmd, color]);
                Observer.fire('colorchange', this.cmd, color);
                this.show = false;
                Observer.fire('hidecloth');
            }
        },
        clear: function () {
            if (this.cmd === 'forecolor') Observer.fire('execCommand', ['forecolor', '#000000']);
            if (this.cmd === 'backcolor') Observer.fire('execCommand', ['backcolor', '#ffffff']);
            this.show = false;
            Observer.fire('hidecloth');
        },
        mouseover: function () {
            var color = event.target.getAttribute('data-color');
            if (color) {
                this.color = color;
            }
        }
    }
  }
</script>